<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>西安市政务服务“好差评”</title>
    <style>
        .content {
            width: 1010px;
            height: auto;
            overflow-x: hidden;
            overflow-y: auto;
            border: 1px solid #d7d7d7;
            background: #ffffff;
            color: #495060;
            font-size: 14px;
            font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
        }

        .title {
            font-size: 30px;
            color: #4a89dc;
            text-align: center;
            margin: 20px 0px 20px 0px;
        }

        .sub_title {
            font-size: 22px;
            text-align: center;
            margin: 20px 0px;
        }

        .but-group {
            text-align: center;
        }

        .btn {
            padding: 10px 20px;
            font-size: 14px;
            border-radius: 4px;
            color: #606266;
            background-color: #FFFFFF;
            border: 1px solid #DCDFE6;
            outline: none;
            cursor: pointer;
        }

        .btnActive {
            background-color: #409EFF;
            border-color: #409EFF;
            color: #fff;
        }

        #star {
            width: 100% !important;
            text-align: center;
            margin: 10px 0;
        }

        #star > img {
            width: 30px;
            height: 30px;
        }

        .form {
            width: 80%;
            margin: 15px auto;
        }

        .from-item {
            position: relative;
            margin-bottom: 10px;
        }

        .from-label {
            display: inline-block;
            width: 100px;
        }

        textarea {
            display: inline-block;
            width: 80%;
            height: 100px;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #DCDFE6;
            outline: none;
            border-radius: 8px;
            resize: none;
        }

        .maxlength {
            position: absolute;
            bottom: 10px;
            right: 80px;
            font-size: 14px;
        }

        .btnCancel {
            color: #FFF;
            background-color: #F56C6C;
            border-color: #F56C6C;
        }

        .description {
            font-size: 16px;
            text-align: center;
        }

        .checkbox-group {
            width: 62%;
            margin: 10px auto;
            color: #6c6c6c;
        }

        .checkbox-item {
            font-size: 18px;
            margin-bottom: 5px;
        }

        input[type=checkbox] {
            color: #409EFF;
            font-size: 18px;
            transform: scale(1.2);
        }

        input[type=checkbox]:hover {
            color: #409EFF;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="content">
        <div class="title">全国一体化在线政务服务平台“好差评”</div>
        <div class="sub_title">整体满意度</div>
        <div class="rate-container">
            <div class="but-group score" onclick="binClick()">
                <!--                <button class="btn btnActive" data-score="5">非常满意</button>-->
                <!--                <button class="btn" data-score="4">满意</button>-->
                <!--                <button class="btn" data-score="3">基本满意</button>-->
                <!--                <button class="btn" data-score="2">不满意</button>-->
                <!--                <button class="btn" data-score="1">非常不满意</button>-->
            </div>
            <div id="star"></div>
            <div class="description">感谢您的评价！请您选择（可多选）评价理由，或填写文字评价，以帮助我们改进服务。</div>
            <div class="checkbox-group">
                <!--                <div class="checkbox-item">-->
                <!--                    <label for="2">-->
                <!--                        <input type="checkbox" id="2" checked>-->
                <!--                        在办事指南之外增加新的审批条件-->
                <!--                    </label>-->
                <!--                </div>-->
            </div>
            <div class="form">
                <div class="from-item">
                    <span class="from-label" style="vertical-align: top">文字评价</span>
                    <textarea name="" placeholder="请输入内容" class="textarea" maxlength="50"
                              oninput="textareaFontLength()" onchange="this.value=this.value.substring(0, 50)"
                              onkeydown="this.value=this.value.substring(0, 50)"
                              onkeyup="this.value=this.value.substring(0, 50)"></textarea>
                    <div class="maxlength">
                        <span id="span_Font_Length">0</span>
                        <span>/</span>
                        <span>50</span>
                    </div>

                </div>
                <div class="from-item">
                    <span class="from-label">是否匿名</span>
                    <label for="">
                        <input type="radio" name="anonymous" value="1">是
                    </label>
                    <label for="">
                        <input type="radio" name="anonymous" value="2" checked>否
                    </label>
                </div>
                <div class="from-item">
                    <span class="from-label">是否公开</span>
                    <label for="">
                        <input type="radio" name="announce" checked value="1">是
                    </label>
                    <label for="">
                        <input type="radio" name="announce" value="2">否
                    </label>
                </div>
            </div>
            <div class="but-group" style="margin-bottom: 30px">
                <button type="button" class="btn btnActive confirmBtn">确定</button>
                <button class="btn btnCancel" onclick="goBack()">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
<!--<script src="../js/jquery.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/common_zzzd.js"></script>
<script type="text/javascript" src="../js/jquery.raty.js"></script>

<script>
    var score = 5;
    var evaluateLevel = [];
    var backUrl = getParam('backUrl') ? getParam('backUrl') : 'suc.html';
    $('#star').raty({
        score: score,
        readOnly: true,
    });

    var resData = [
        {
            "level": "1",
            "description": "非常不满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "113",
                    "enable": 1,
                    "content": "在办事指南之外增加新的审批条件",
                    "contentCode": "108"
                },
                {
                    "id": "114",
                    "enable": 1,
                    "content": "需提供办事指南之外的申报材料",
                    "contentCode": "109"
                },
                {
                    "id": "115",
                    "enable": 1,
                    "content": "无理由超过法定办理时间",
                    "contentCode": "110"
                },
                {
                    "id": "116",
                    "enable": 1,
                    "content": "多头跑窗口和部门",
                    "contentCode": "113"
                },
                {
                    "id": "117",
                    "enable": 1,
                    "content": "服务态度差效率低",
                    "contentCode": "115"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": []
                },
                {
                    "name": "服务精确性",
                    "contentList": [
                        {
                            "id": "113",
                            "enable": 1,
                            "content": "在办事指南之外增加新的审批条件",
                            "contentCode": "108"
                        },
                        {
                            "id": "114",
                            "enable": 1,
                            "content": "需提供办事指南之外的申报材料",
                            "contentCode": "109"
                        }
                    ]
                },
                {
                    "name": "窗口服务",
                    "contentList": [
                        {
                            "id": "115",
                            "enable": 1,
                            "content": "无理由超过法定办理时间",
                            "contentCode": "110"
                        }
                    ]
                }
            ]
        },
        {
            "level": "2",
            "description": "不满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "108",
                    "enable": 1,
                    "content": "没有提供材料样本",
                    "contentCode": "207"
                },
                {
                    "id": "109",
                    "enable": 1,
                    "content": "没有提供材料清单",
                    "contentCode": "208"
                },
                {
                    "id": "110",
                    "enable": 1,
                    "content": "未在承诺时间内办结",
                    "contentCode": "209"
                },
                {
                    "id": "111",
                    "enable": 1,
                    "content": "窗口人员业务不熟练",
                    "contentCode": "213"
                },
                {
                    "id": "112",
                    "enable": 1,
                    "content": "服务态度生硬",
                    "contentCode": "214"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": []
                },
                {
                    "name": "服务精确性",
                    "contentList": [
                        {
                            "id": "108",
                            "enable": 1,
                            "content": "没有提供材料样本",
                            "contentCode": "207"
                        },
                        {
                            "id": "109",
                            "enable": 1,
                            "content": "没有提供材料清单",
                            "contentCode": "208"
                        },
                        {
                            "id": "110",
                            "enable": 1,
                            "content": "未在承诺时间内办结",
                            "contentCode": "209"
                        }
                    ]
                },
                {
                    "name": "窗口服务",
                    "contentList": []
                }
            ]
        },
        {
            "level": "3",
            "description": "基本满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "103",
                    "enable": 1,
                    "content": "一次性告知需要补正的材料",
                    "contentCode": "307"
                },
                {
                    "id": "104",
                    "enable": 1,
                    "content": "提供申报材料样本",
                    "contentCode": "308"
                },
                {
                    "id": "105",
                    "enable": 1,
                    "content": "在承诺的时间内办结",
                    "contentCode": "309"
                },
                {
                    "id": "106",
                    "enable": 1,
                    "content": "按办事指南要求的材料即可办理",
                    "contentCode": "311"
                },
                {
                    "id": "107",
                    "enable": 1,
                    "content": "服务态度一般",
                    "contentCode": "314"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": []
                },
                {
                    "name": "服务精确性",
                    "contentList": [
                        {
                            "id": "103",
                            "enable": 1,
                            "content": "一次性告知需要补正的材料",
                            "contentCode": "307"
                        },
                        {
                            "id": "104",
                            "enable": 1,
                            "content": "提供申报材料样本",
                            "contentCode": "308"
                        },
                        {
                            "id": "105",
                            "enable": 1,
                            "content": "在承诺的时间内办结",
                            "contentCode": "309"
                        }
                    ]
                },
                {
                    "name": "窗口服务",
                    "contentList": [
                        {
                            "id": "106",
                            "enable": 1,
                            "content": "按办事指南要求的材料即可办理",
                            "contentCode": "311"
                        }
                    ]
                }
            ]
        },
        {
            "level": "4",
            "description": "满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "98",
                    "enable": 1,
                    "content": "填写一张表单就可完成申报",
                    "contentCode": "406"
                },
                {
                    "id": "99",
                    "enable": 1,
                    "content": "在线提交材料窗口核验",
                    "contentCode": "407"
                },
                {
                    "id": "100",
                    "enable": 1,
                    "content": "一张清单告知全部申报材料",
                    "contentCode": "408"
                },
                {
                    "id": "101",
                    "enable": 1,
                    "content": "跑大厅一次办完",
                    "contentCode": "411"
                },
                {
                    "id": "102",
                    "enable": 1,
                    "content": "服务态度较好",
                    "contentCode": "413"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": [
                        {
                            "id": "98",
                            "enable": 1,
                            "content": "填写一张表单就可完成申报",
                            "contentCode": "406"
                        }
                    ]
                },
                {
                    "name": "服务精确性",
                    "contentList": [
                        {
                            "id": "99",
                            "enable": 1,
                            "content": "在线提交材料窗口核验",
                            "contentCode": "407"
                        },
                        {
                            "id": "100",
                            "enable": 1,
                            "content": "一张清单告知全部申报材料",
                            "contentCode": "408"
                        }
                    ]
                },
                {
                    "name": "窗口服务",
                    "contentList": [
                        {
                            "id": "101",
                            "enable": 1,
                            "content": "跑大厅一次办完",
                            "contentCode": "411"
                        }
                    ]
                }
            ]
        },
        {
            "level": "5",
            "description": "非常满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "93",
                    "enable": 1,
                    "content": "一窗受理一次办结",
                    "contentCode": "510"
                },
                {
                    "id": "94",
                    "enable": 1,
                    "content": "可以先受理后补材料",
                    "contentCode": "511"
                },
                {
                    "id": "95",
                    "enable": 1,
                    "content": "不用提交证明",
                    "contentCode": "512"
                },
                {
                    "id": "96",
                    "enable": 1,
                    "content": "可以就近办理",
                    "contentCode": "515"
                },
                {
                    "id": "97",
                    "enable": 1,
                    "content": "服务热情效率高",
                    "contentCode": "517"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": []
                },
                {
                    "name": "服务精确性",
                    "contentList": []
                },
                {
                    "name": "窗口服务",
                    "contentList": [
                        {
                            "id": "93",
                            "enable": 1,
                            "content": "一窗受理一次办结",
                            "contentCode": "510"
                        },
                        {
                            "id": "94",
                            "enable": 1,
                            "content": "可以先受理后补材料",
                            "contentCode": "511"
                        }
                    ]
                }
            ]
        }
    ]

    var evaluateId = getParam('infoParam');

    getEvaluateLevelConfig()

    function getEvaluateLevelConfig() {
        var _this = this;
        $.ajax({
            type: 'get',
            url: apiHost + '/web/api/evaluate/getEvaluateConfig',
            dataType: 'json',
            success: function (result) {
                if (result.status === 200 && result.data) {
                    evaluateLevel = result.data;
                    createElement(evaluateLevel)
                    binClick();
                }
            }
        })
    }

    createElement(resData)

    function createElement(data) {
        var strBtn = '';
        for (var i = 0; i < data.length; i++) {
            strBtn += '<button class="btn" data-score=' + data[i].level + '>' + data[i].description + '</button> '; //拼接str
            if (data[i].contentList.length > 0) {
                createElementCheckbox(data.length)
            }
        }
        console.log('str', strBtn)
        $('.score').html(strBtn);
        $(".score>button:last-child").addClass('btnActive');
    }

    // 创建多选
    function createElementCheckbox(score) {
        var strCheckbox = '';
        var data = resData;
        for (var i = 0; i < data.length; i++) {
            if (data[i].contentList.length > 0) {
                for (var j = 0; j < data[i].contentList.length; j++) {
                    if (data[i].level == score) {
                        strCheckbox += '<div class="checkbox-item">' +
                            '<label for=' + data[i].contentList[j].id + '>' +
                            '<input type="checkbox" id=' + data[i].contentList[j].id + ' data-enable=' + data[i].contentList[j].enable + ' data-enable=' + data[i].contentList[j].enable + ' data-contentCode=' + data[i].contentList[j].contentCode + ' value=' + data[i].contentList[j].contentCode + '>' + data[i].contentList[j].content +
                            '</label>' +
                            '</div>'
                    }
                }
            }
        }
        $('.checkbox-group').html(strCheckbox);
    }

    // 评分选择
    function binClick() {
        $('.score .btn').on('click', function (e) {
            $(this).siblings().removeClass('btnActive');
            $(this).addClass('btnActive');
            score = $(this).data('score')
            $('#star').raty({
                score: score,
                readOnly: true,
            });
            createElementCheckbox(score)
        })
    }

    // 多选
    $('.checkbox-group>.checkbox-item').on('click', function () {
        console.log($(this).text());
    })

    // 确认提交
    $('.confirmBtn').on('click', function (e) {
        var _self = $(this);
        var textarea = $('.textarea').val()
        var anonymousVal = $('input[name="anonymous"]:checked').val();
        var announceVal = $('input[name="announce"]:checked').val();
        var arry = new Array();
        //循环所有选中的值
        $('input[type="checkbox"]:checked').each(function (index, element) {
            //追加到数组中
            arry.push($(this).val());
        });
        //将数组元素连接起来转化为字符串
        var arrystr = arry.join(',');

        if (score <= 2) {
            if (!textarea) {
                alert('评价内容不能为空')
                return false
            } else if (arry.length <= 0) {
                alert('请选择评价理由')
                return false
            }
        }


        var evaluate = {
            words: textarea,
            anonymityFlag: anonymousVal,
            publicFlag: announceVal,
            id: evaluateId,
            contentCode: arrystr
        }

        $(this).attr({"disabled": "disabled"});
        $.ajax({
            type: 'post',
            url: apiHost + '/web/api/evaluate/addEvaluate',
            data: evaluate,
            dataType: 'json',
            success: function (result) {
                if (result.status === 200) {
                    alert(score <= 2 ? negativeMsg : positiveMsg)
                    // _this.showMessage('success', _this.evaluate.levelCode <= 2 ? negativeMsg : positiveMsg);
                    // 消息通知提交评价成功
                } else {
                    _self.removeAttr("disabled");//将按钮可用
                }
            },
            error: function () {
                alert('保存失败')
                _self.removeAttr("disabled");//将按钮可用
            }
        });
        goBack()
    })

    function goBack() {
        if (backUrl) {
            parent.location.href = backUrl;
        } else {
            window.location.href = 'suc.html';
        }
    }

    function textareaFontLength() {
        var strTeatArea = $(".textarea").val().length;
        console.log('strTeatArea', strTeatArea)
        $("[id$='span_Font_Length']").text(strTeatArea);
    }

    $('.textarea').keyup(function (e) {
        var strTeatArea = $(".textarea").val().length;
        console.log('strTeatArea', strTeatArea)
        $("[id$='span_Font_Length']").text(strTeatArea);
    });
</script>
</html>